<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Fingerprint status</h2>
    <p>Showing a status message with a purely decorative icon</p>
    <mat-icon color="primary">fingerprint</mat-icon>
    Your fingerprint was recorded!
  </section>

  <section>
    <h2>Delete icon button </h2>
    <p>Showing a button with interactive icon which can perform an action</p>
    <button mat-icon-button aria-label="Delete" (click)="deleteIcon()">
      <mat-icon color="accent">delete</mat-icon>
    </button>
  </section>

  <section>
    <h2>Home link </h2>
    <p>Showing a link with interactive icon</p>
    <a mat-icon-button aria-label="Home" href="http://www.google.com">
      <mat-icon color="warn">home</mat-icon>
    </a>
  </section>

  <section>
    <h2>Done status </h2>
    <p>Showing a status indicator with an indicator icon</p>
    <mat-icon color="primary">done</mat-icon>
    <span class="cdk-visually-hidden">Done</span>
    Tasks
  </section>
</mat-card>